<template>
  <ItemMusicTop :playlist="state.playlist" />
  <itemMusicList :itemList="state.itemList" />
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { getMusicItemList, getItemList } from "@/request/api/item";
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import itemMusicList from "@/components/item/itemMusicList.vue";
export default {
  setup() {
    const state = reactive({
      playlist: {}, //防止数据丢失 保存本地
      itemList: [], // 歌单内歌曲数据
    });
    onMounted(async () => {
      //   console.log(useRoute());
      let id = useRoute().query.id;
      console.log(id);
      //获取歌单详情页
      let res = await getMusicItemList(id);
      // console.log(res);
      state.playlist = res.data.playlist;
      // 获取歌单内歌曲
      let result = await getItemList(id);
      console.log(result);
      state.itemList = result.data.songs;
      // 防止页面刷新丢失数据 将数据保存到本地 sessionStorage内
      sessionStorage.setItem("itemDetail", JSON.stringify(state));
    });
    return { state };
  },
  components: {
    ItemMusicTop,
    itemMusicList,
  },
};
</script>
